<template>
	<view class="edit-type-list flexc">
		<view class="pd">长按拖动分类可排序，轻触你添加的分类可编辑</view>
		<view class="flexr flex-a-c pd">
			<view :class="['pt', data.checkType == 1 ? 'p1' : '']" @click="checkTypeBtn(1)">支出</view>
			<view :class="['pt', data.checkType == 2 ? 'p2' : '']" @click="checkTypeBtn(2)">入账</view>
			<view :class="['pt', data.checkType == 3 ? 'p3' : '']" @click="checkTypeBtn(3)">不计入收支</view>
		</view>
		<view class="wrap flex1 over-auto">
			<view class="flexr flex-wr">
				<view class="p-box " v-for="(val, k) in data.list[data.checkType - 1].list" :key="k" @touchstart="touchStart">
					<view :class="['iconfont', 'icon-set', val.icon, 
								data.checkType==1?'ac1':data.checkType==2?'ac2':data.checkType==3?'ac3':'']"></view>
					<view class="">{{ val.title }}</view>
					<view class="e-t flexr flex-a-c flex-j-c" v-if="val.isEdit==1">
						<text class="iconfont icon-xiugai" @click.stop="editValBtn(k,1)"></text>
						<text class="iconfont icon-shanchu" @click.stop="editValBtn(k,2)"></text>
					</view>
				</view>
				<view class="p-box" @click="showTan">
					<view class="iconfont icon-tianjia icon-set"></view>
					<view class="b">添加</view>
				</view>
			</view>
		</view>
		<!-- 添加分类弹框 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-wrap flexc">
				<view class="pop-nav">
					<view class="">添加分类</view>
					<view class="close iconfont icon-guanbi1" @click="()=>popup.close()"></view>
				</view>
				<view class="inp">
					<input type="text" maxlength="4" v-model="data.typeVal" placeholder="不能与已有类名重复,最多四个字"/>
				</view>
				<view :class="['btn',data.typeVal?data.checkType==1?'ac1':data.checkType==2?'ac2':data.checkType==3?'ac3':'':'']" @click="addType">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { useStore } from '../../store';
import { onLoad } from '@dcloudio/uni-app'
import requestApi from '../../utils/api.js';
const store = useStore();

const data = reactive({
	list: computed(() => store.typeList),
	checkType: 1,
	typeVal:'',//添加类名的值
	editIndex:null,//修改的下标
});
const popup = ref(null);
	onLoad((options=>{
		data.checkType = options.type || 1
	}))
const listChange = e=>{
	console.log('退------',e);
}
const touchStart = e=>{
	console.log(e,'按下');
}
// 点击当前的添加分类进行修改或删除
const editValBtn = (k,t)=>{
	const s = store.typeList[data.checkType-1].list[k]
	console.log('1',s,t);
	if(s.isEdit!=1) return 
	if(t==1){//修改
		data.typeVal = s.title
		data.editIndex = k
		popup.value.open()
	}else{
		uni.showModal({
			title: '温馨提示',
			content: '是否要删除当前分类',
			cancelText: '删除',
			confirmText: '在想想',
			success: res => {
				if(res.cancel){
					const params = {
						id:store.userInfo._id,
						title:s.title,
						pindex:data.checkType-1,
						isEdit:k,
						type:'delType'
					}
					requestApi('jSign',params).then(res=>{
						store.toast(res.result.msg)
						if(res.result.status==='S'){
							store.typeList[data.checkType-1].list.splice(k,1)
						}
					})
				}
			},
			fail: () => {},
			complete: () => {}
		});
	}
}
// 弹框中的确定事件
const addType = ()=>{
	if(!data.typeVal){
		
		return 
	}
	const s = store.typeList.find(item=>{
		return item.list.find(val=>val.title == data.typeVal)
	})
	console.log(store.typeList,'-----',s,'----',data.typeVal);
	if(s){
		uni.showToast({
			title: '名称与已有分类名称重复，请输入一个不同的名称',
			icon:'none'
		});
		return 
	}
	let obj = {}
	if(data.editIndex!=null){
		store.typeList[data.checkType-1].list[data.editIndex].title = data.typeVal
	}else{
		obj = {
			icon:'icon-shiyongwendang',
			title:data.typeVal,
			isEdit:1,
			type:`${data.checkType}-${store.typeList[data.checkType-1].list.length}`
		}
		store.typeList[data.checkType-1].list.push(obj)
	}
	
	popup.value.close()
	const params = {
		type:'editType',
		pindex:data.checkType-1,
		isEdit:data.editIndex,
		title: data.typeVal,
		arrObj:obj,
		id:store.userInfo._id
	}
	requestApi('jSign',params).then(res=>{
		store.toast(res.result.msg)
	})
}
// 点击展示弹框
const showTan = ()=>{
	data.typeVal = ''
	data.editIndex = null
	popup.value.open()
}

// 顶部分类导航切换
const checkTypeBtn = k=>{
	data.checkType = k
}
</script>

<style lang="scss">
.edit-type-list {
	width: 100%;
	height: 100%;
	.pd{
		padding:40upx ;
	}
	.e-t{
		&>text{
			font-size: 40upx;
		}
		&>text:nth-child(1){
			margin-right: 20upx;
			color: #ffaa7f;
		}
	}
	.pop-wrap {
		height: 500upx;
		background-color: #fafafa;
		border-radius: 20upx 20upx 0 0;
		box-sizing: border-box;
		padding-bottom: var(--window-bottom);
		.pop-nav {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			border-bottom: 1upx solid #ccc;
			position: relative;
			padding: 0 40upx;
			.close {
				position: absolute;
				top: 50%;
				left: 40upx;
				font-size: 40upx;
				transform: translateY(-50%);
			}
		}
	}
	.inp{
		width: 80%;
		height:120upx;
		border-radius:20upx;
		margin:40upx auto;
		box-sizing:border-box;
		padding:40upx;
		background: #F2F2F2;
		&>input{
			width: 100%;
			height:100%;
		}
	}
	.btn{
		width: 80%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		font-weight: bold;
		border-radius: 20upx;
		margin: 20upx auto 0;
		background-color: #F2F2F2;
		color: #ccc;
	}
	.p-box{
		width: 25%;
		text-align: center;
		font-size: 28upx;
		margin-bottom: 20upx;
		color: #000;
	}
	.icon-set {
		font-size: 40upx;
		color: #ccc;
		width: 80upx;
		height:80upx;
		border-radius: 50%;
		background-color: #efefef;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto 10upx;
	}
	.pt {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: #eee;
		margin-right: 20upx;
		border-radius: 10upx;
		font-size: 28upx;
		color: #ccc;
	}
	.ac1 {
		color: #fff;
		background-color: #3eb575;
	}
	.ac2 {
		color: #fff;
		background-color: #f0b73a;
	}
	.ac3 {
		color: #fff;
		background-color: #7888aa;
	}
	.p1 {
		color: #3eb575;
		background-color: #ebf7f1;
	}
	.p2 {
		background-color: #fdf8eb;
		color: #f0b73a;
	}
	.p3 {
		background-color: #f1f3f6;
		color: #7888aa;
	}
}
</style>
